<template>
    <Modal
        class-name="report-modal"
        :value="value"
        :mask-closable="false"
        @input="handleInput"
        width="800px"
    >
        <div slot="header" class="report-title">
            实训报告
        </div>
        <div>
            <div class="report-subtitle">
                <span>学号：{{ report.stuNo }}</span>
                <span>姓名：{{ report.stuName }}</span>
            </div>
            <div class="report-content">
                <iframe v-if="iframeUrl" :src="iframeUrl" frameborder="0"></iframe>
            </div>
        </div>
        <div slot="footer">
            <div class="f-fl">
                <span>得分（满分{{ report.totalScore }}）：</span>
                <Input class="scoure-input" v-model="score" />
            </div>
            <Button
                type="primary"
                @click="submit"
            >保存</Button>
            <Button
                type="primary"
                @click="submit"
            >批阅下一个</Button>
        </div>
    </Modal>
</template>
<script>

export default {
    props: {
        value: {
            type: Boolean,
            default: false
        },
        report: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            score: ''
        }
    },
    watch: {
        'report.reportScore' (v) {
            this.score = v
        }
    },
    computed: {
        iframeUrl () {
            return this.value
                ? (this.report.reportUrl || '')
                : ''
        }
    },
    methods: {
        handleInput (v) {
            this.$emit('input', v)
        },
        validScore (value) {
            const totalScore = this.report.totalScore || 0
            const valid = /^\d(\.\d)?$/.test(value) && value <= totalScore
            const msg = valid ? '' : '得分0~满分之间 ，最多一位小数'
            return {
                valid,
                msg
            }
        },
        submit () {
            const value = this.score
            const valid = this.validScore(value)
            if (valid.valid) {
                this.$Message.success(`保存成功`)
            } else {
                this.$Message.warning(valid.msg)
            }
        }
    }
}
</script>
<style lang="less" scoped>
.report-title {
    text-align: center;
}
.report-subtitle {
    padding-bottom: 10px;
    span + span {
        margin-left: 15px;
    }
}
.report-content {
    height: 500px;
    iframe {
        width: 100%;
        height: 100%;
    }
}
.scoure-input {
    width: 200px;
    margin-right: 10px;
}
/deep/ .ivu-modal-body {
    height: 80%;
    max-height: 80%;
}
</style>
